<template>
  <div class="father">
    <h3>父组件</h3>

    <div class="content">
      <!-- <Game>
        <template v-slot="p">
          <h4>v- slot 这里拿到的是再 solt上声明的各种标签参数，如果是光秃秃的 solt p就为空</h4>
          {{ p }}
        </template>
      </Game> -->
      
      <Game>
        <template v-slot="param">
            <ul>
              <li v-for=" g in param.youxi" :key="g.id">
                {{ g.name }}
              </li>
            </ul> 
        </template>
      </Game>

      <Game>
        <template v-slot="slo">
          <ol>
            <li v-for=" g in slo.youxi" :key="g.id"> {{ g.name }}</li>
          </ol>

        </template>
      </Game>
      
      <Game>
        <template v-slot="param">
          <h3 v-for="g in param.youxi" :key="g.id">{{ g.name }}</h3>
        </template>
      </Game>
    </div>
    

  </div>
</template>

<script setup lang="ts" name="Father">
import Game from './Game.vue';



</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
  }
  img,video {
    width: 100%;
  }
</style>